<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一、注册组件的基本步骤 -->
    <!-- 1.创建组件构造器：Vue.extend() -->
    <!-- 2.注册组件（全局组件/局部组件）:Vue.component() -->
    <!-- 3.使用组件：在Vue实例的作用范围内使用 -->

    <div id="app">
        <!-- 第三步：使用组件 -->
        <my-cpn></my-cpn>
        <DIV>66666666666</DIV>
    </div>
    <div id="app2">
        <my-cpn></my-cpn>

    </div>
    <script src="./vue.js"></script>
    <script>
       

        // 第一步：创建组件构造器
        let myComponent=Vue.extend({
            // 模版
            template:`
            <div>
                <h2>组件标题</h2>
                <p>组件内容。。。。。</p>
            </div>
            `
            // 注意；模版中的html元素只能有一个根元素，因此需要在外面包一个div，不能直接写h2和p元素
        })

        // 第二步：注册组件
        Vue.component("my-cpn",myComponent);//注册全局组件
        // 第一个参数表示组件名字："my-cpn"，不要使用驼峰命名法，名字中不要用大写字母，
        // 因为在html中使用该组件时，不分大小写，所有的字母都会转为小写
    

        // 注意：实例化对象必须写在注册组件之后，否则会报错
        let app=new Vue({
            el:"#app"
        })

        let app2=new Vue({
            el:"#app2"
        })
    </script>
</body>
</html>